<template>
  <div class="font-setting d-flex al-center">
    <el-select v-model="styleObject.fontSize" class="mr-24">
      <el-option v-for="size in sizeOptions" :key="size" :value="size" :label="size"></el-option>
    </el-select>

    <SvgIcon
      v-if="settings.includes('bolder')"
      icon-class="bolder"
      class="mr-16 pointer"
      :class="{ 't-theme': styleObject.fontWeight === 'bold' }"
      @click="styleObject.fontWeight = styleObject.fontWeight === 'bold' ? 'normal' : 'bold'"
    ></SvgIcon>

    <SvgIcon
      v-if="settings.includes('line-through')"
      class="mr-16 pointer"
      icon-class="line-through"
      :class="{ 't-theme': styleObject.textDecoration }"
      @click="styleObject.textDecoration = styleObject.textDecoration ? '' : 'line-through'"
    ></SvgIcon>
    <template v-if="settings.includes('align')">
      <SvgIcon
        class="mr-16 pointer"
        icon-class="left-align"
        :class="{ 't-theme': styleObject.textAlign === 'justify' }"
        @click="styleObject.textAlign = 'justify'"
      ></SvgIcon>
      <SvgIcon
        class="mr-16 pointer"
        icon-class="center-align"
        :class="{ 't-theme': styleObject.textAlign === 'center' }"
        @click="styleObject.textAlign = 'center'"
      ></SvgIcon>
      <SvgIcon
        icon-class="right-align"
        :class="{ 't-theme': styleObject.textAlign === 'right' }"
        @click="styleObject.textAlign = 'right'"
      ></SvgIcon>
    </template>
  </div>
</template>

<script>
  export default {
    model: { prop: 'styleObject' },
    props: {
      sizeOptions: { type: Array, default: () => [12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 48, 56, 64] },
      styleObject: { type: Object, default: () => ({}) },
      double: { type: Boolean, default: true },
      settings: { type: Array, default: () => ['bolder', 'line-through', 'align'] }
    },

    methods: {
      // handleBold() {
      //   if (window.getSelection().toString()) {
      //     document.execCommand('StyleWithCSS', true, true);
      //     document.execCommand('bold', false, null);
      //     this.$emit('changeFont');
      //   } else {
      //     this.styleObject.fontWeight = this.styleObject.fontWeight === 'bold' ? 'normal' : 'bold';
      //   }
      // }
    }
  };
</script>

<style lang="scss" scoped>
  .font-setting ::v-deep {
    .el-select {
      width: 80px;

      .el-input__inner {
        text-align: center;
      }
    }

    .svg-icon {
      color: map-get($colors, 'light');
    }

    // button[type='button'] {
    //   border: none !important;
    //   padding: 0 !important;
    //   background-color: #fff;
    // }
  }
</style>
